<template>
	<view class="content" >
		<!-- #ifndef APP-PLUS -->
		 <wx-nav-bar ></wx-nav-bar>
		<!-- #endif -->
		<top-tab ref="setTopScroll" @topScrollChange="topScrollChange" :topScrollItem="topScrollItem" ></top-tab>
		<!-- 这里的swiper只是控制左右滑动，但是上线滚动需要使用scroll-view来完成 -->
		<swiper :current-item-id="swiperId" @change="swiperChange" :style="'height:'+windowHeight+'px;'" >
			<swiper-item v-for="(item,index) in topScrollItem" :key="'swipper'+index" :item-id="'swiper'+index">
				<scroll-view scroll-y="true"  :style="'height:'+windowHeight+'px;'" 
				@scrolltolower="lodeMore"
				:refresher-enabled="true"
				:refresher-triggered="refresherTriggered"
				@refresherrefresh="refresherrefresh"
				
					>
					<!-- banner -->
					<banner :swiperImage="swiperImage"></banner>
					<!-- 分类组件 -->
					<catgory :catgoryList="catgoryList"></catgory>
					<linex></linex>
					<!-- 3图广告 -->
					<image3 :Image3="Image3"></image3>
					<linex></linex>
					<!-- 每日精选 -->
					<big-advert></big-advert>
					<linex></linex>
					<goods :goodList="goodList"></goods>
					<view v-if="loadMoreFlg" class="" style="color: #CCCCCC;font-size: 30rpx; text-align: center;">加载中...</view>
					<view v-if="NoloadMoreFlg" class="" style="color: #CCCCCC;font-size: 30rpx; text-align: center;">--已经到底了--</view>
				</scroll-view>
			</swiper-item>
			
		</swiper>
	</view>
</template>

<script>
	import wxNavBar from "../../componets/index/wx-nav-bar.vue"
	import topTab from "../../componets/index/top-tab.vue"
	import banner from "../../componets/index/banner.vue"
	import catgory from "../../componets/index/catgory.vue"
	import image3 from "../../componets/index/3image.vue"
	import bigAdvert from "../../componets/index/big-advert.vue" 
	import goods from "../../componets/index/goods.vue"
	export default {
		components: {
			topTab,
			banner,
			catgory,
			image3,
			bigAdvert,
			goods,
			wxNavBar

		},
		data() {
			return {
				windowHeight:500,
				swiperId:"swiper"+0,
				refresherTriggered:false,
				loadMoreFlg:false,
				NoloadMoreFlg:false,
				topScrollItem: ['关注', '推荐', '体育', '热点', '财经', '论文', '财务', '日报', '环保', '经济', '推荐', '体育', '热点', '财经'],
				swiperImage: [{
						"src": "https://sass-gmall.oss-cn-hangzhou.aliyuncs.com/images/1605167154963.jpg"
					},
					{
						"src": "https://sass-gmall.oss-cn-hangzhou.aliyuncs.com/images/1605168159442.jpg"
					},
					{
						"src": "https://sass-gmall.oss-cn-hangzhou.aliyuncs.com/images/1605167158253.jpg"
					}
				],
				catgoryList: [{
						"name": "新品分类",
						"src": "https://sass-gmall.oss-cn-hangzhou.aliyuncs.com/images/1605168738199.jpg"
					},
					{
						"name": "小米众筹",
						"src": "https://sass-gmall.oss-cn-hangzhou.aliyuncs.com/images/1605168740886.jpg"
					},
					{
						"name": "以旧换新",
						"src": "https://sass-gmall.oss-cn-hangzhou.aliyuncs.com/images/1605168743098.jpg"
					},
					{
						"name": "1分拼团",
						"src": "https://sass-gmall.oss-cn-hangzhou.aliyuncs.com/images/1605168745865.jpg"
					},
					{
						"name": "超值特卖",
						"src": "https://sass-gmall.oss-cn-hangzhou.aliyuncs.com/images/1605168748619.jpg"
					},
					{
						"name": "小米秒杀",
						"src": "https://sass-gmall.oss-cn-hangzhou.aliyuncs.com/images/1605168752138.jpg"
					},
					{
						"name": "真心想要",
						"src": "https://sass-gmall.oss-cn-hangzhou.aliyuncs.com/images/1605168756230.jpg"
					},
					{
						"name": "电视热卖",
						"src": "https://sass-gmall.oss-cn-hangzhou.aliyuncs.com/images/1605168759427.jpg"
					},
					{
						"name": "家电热卖",
						"src": "https://sass-gmall.oss-cn-hangzhou.aliyuncs.com/images/1605168762823.jpg"
					},
					{
						"name": "米粉新卡",
						"src": "https://sass-gmall.oss-cn-hangzhou.aliyuncs.com/images/1605168765431.jpg"
					}
				],
				Image3: [{
						id: "1",
						src: "https://sass-gmall.oss-cn-hangzhou.aliyuncs.com/images/1605171391214.jpg"
					},
					{
						id: 2,
						src: "https://sass-gmall.oss-cn-hangzhou.aliyuncs.com/images/1605171403273.jpg"
					},
					{
						id: 3,
						src: "https://sass-gmall.oss-cn-hangzhou.aliyuncs.com/images/1605171407296.jpg"
					}
				],
				goodList: [{
						titlepic: "https://sass-gmall.oss-cn-hangzhou.aliyuncs.com/images/1597282909489.jpg",
						title: "米家空调米家空调",
						desc: "米家空调1.5匹支流变频",
						pprice: 2199,
						oprice: 2699
					},
					{
						titlepic: "https://sass-gmall.oss-cn-hangzhou.aliyuncs.com/images/1597038702140.jpg",
						title: "米家空调米家空调",
						desc: "米家空调1.5匹米家空调支流变频",
						pprice: 2199,
						oprice: 2699
					},
					{
						titlepic: "https://sass-gmall.oss-cn-hangzhou.aliyuncs.com/images/1605173854813.jpg",
						title: "米家空调米家空调",
						desc: "米家空调米家空调1.5匹支流变频",
						pprice: 2199,
						oprice: 2699
					},
					{
						titlepic: "https://sass-gmall.oss-cn-hangzhou.aliyuncs.com/images/1604887670937.jpg",
						title: "米家空调米家空调",
						desc: "1.5匹支米家空调米家空调流变频",
						pprice: 2199,
						oprice: 2699
					},
					{
						titlepic: "https://sass-gmall.oss-cn-hangzhou.aliyuncs.com/images/1597038219878.jpg",
						title: "米家空米家空调调",
						desc: "1.5匹支米家空调米家空调流变频",
						pprice: 2199,
						oprice: 2699
					},
					{
						titlepic: "https://sass-gmall.oss-cn-hangzhou.aliyuncs.com/images/1597038631134.jpg",
						title: "米家米家空调空调",
						desc: "1.5匹米家空调米家空调支流变频",
						pprice: 2199,
						oprice: 2699
					},
					{
						titlepic: "https://jffy.oss-cn-shanghai.aliyuncs.com/21fab187-a860-498c-953e-2fda07a8abcb.jpg",
						title: "米家米家空调空调",
						desc: "1.5匹米家空调米家空调支流变频",
						pprice: 2199,
						oprice: 2699
					},{
						
						titlepic: "https://sass-gmall.oss-cn-hangzhou.aliyuncs.com/images/1597038219878.jpg",
						title: "米家米家空调空调",
						desc: "1.5匹米家空调米家空调支流变频",
						pprice: 2199,
						oprice: 2699
					},
					{
						titlepic: "https://sass-gmall.oss-cn-hangzhou.aliyuncs.com/images/1597038631134.jpg",
						title: "米家米家空调空调",
						desc: "1.5匹米家空调米家空调支流变频",
						pprice: 2199,
						oprice: 2699
					}
				]
			}
		},
		//仅仅会触发一次onLoad
		onLoad() {
			uni.getSystemInfo({
				success:res=>{
					//82就是底部滑块的高度
					// #ifdef APP-PLUS
					this.windowHeight=res.windowHeight-uni.upx2px(82);
					// #endif
					// #ifndef APP-PLUS
					this.windowHeight=res.windowHeight;
					// #endif
				}
			})
		},
		// 监听原生导航栏搜索框点击事件
		onNavigationBarSearchInputClicked(){
			uni.navigateTo({
				url:"../search/search"
			})
		},
		onHide(){
			uni.hideToast()
		},
		onUnload(){
			uni.hideToast()
		},
		methods: {
			swiperChange(option){
				this.$refs.setTopScroll.changeTab(option.detail.current)
			},
			topScrollChange(index){
				this.swiperId="swiper"+index;
			},
			// scroll上拉加载更多
			lodeMore(){
				
				if(this.goodList.length>22){
					this.NoloadMoreFlg=true;
					return;
				}
				this.loadMoreFlg=true;
				setTimeout(()=>{
					this.goodList=[...this.goodList,this.goodList[1],this.goodList[2],this.goodList[3],this.goodList[4],this.goodList[5]];
					this.loadMoreFlg=false;
				},1000)
			},
			//scroll的下拉刷新，和全局的下拉刷新有区别
			refresherrefresh(){
				if(this.refresherTriggered){
					return;
				}
				this.refresherTriggered=true;
				let timer=setTimeout(()=>{
					this.refresherTriggered=false
					uni.showToast({
						title:"刷新成功"
					})
					clearTimeout(timer)
				},2000)
			}
			
		}
	}
</script>

<style lang="less">

</style>
